<template>
	<view class="statistics">
		<view class="form">
			<view class="form_item">
				<view class="text"> 输入客户名称: </view>
				<view class="input">
					<input type="text" v-model="formData.sname" placeholder="请输入客户名称" />
					<button @tap="open">去选择</button>
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> 统计类型: </view>
				<view class="input">
					<input disabled :value="columns[0][formData.payChannel]" type="text" placeholder="请选择类型" @tap="openPayPick" />
				</view>
			</view>
			<view class="btn" @tap="queryData">
				查询
			</view>
			<view class="Actual">
				实收款:<text>{{realAmt}}</text>
			</view>
		</view>
		<view class="article">
			<table border="0">
				<tr>
					<th>制单人</th>
					<th>订单日期</th>
					<th>实收款 </th>
					<th>发票金额</th>
				</tr>
				<block v-if="total > 0">
					<tr v-for="(item, index) in list" :key="index">
						<td>{{ item.opName || '-' }}</td>
						<td>{{ item.orderDay || '-' }}</td>
						<td>{{ item.realAmt || '-' }}</td>
						<td>{{ item.orderAmt || '-' }}</td>
					</tr>
				</block>

				<tr v-else>
					<td colspan="7">
						<u-divider textSize="34" text="暂无数据"></u-divider>
					</td>
				</tr>
			</table>
		</view>
		<CustomerScreening ref="child" @saveUser="saveUser" />
		<payPick ref="payPick" @confirm="confirm"/>
	</view>
</template>

<script>
	import CustomerScreening from "../../components/CustomerScreening.vue";
	import payPick from "../../components/payPickCopy.vue";
	export default {
		components: {
			CustomerScreening,
			payPick
		},
		data() {
			return {
				columns: [
					["收款","付款"]
				],
				list:[],
				realAmt:"",
				total:0,
				formData: {
					sname: "",
					beginTime: "",
					payChannel: "",
					endTime: "",
					// keyword: "",
					pageNo: 1,
					pageSize: 10
				}
			}

		},
		onLoad(){
			this.getList(this.formData)
		},
		methods: {
			confirm({type}){
				this.formData.payChannel = type
				// console.log(this.formData.payChannel)
			},
			openPayPick(){
				this.$refs.payPick.open()
			},
			async getList(formData) {
				// console.log(formData)
				// uni.showLoading({
				// 	title: "加载中...",
				// });
				let requestData = uni.$u.deepClone(formData);
				Object.keys(requestData).map((item) => {
					if (requestData[item] == '' || requestData[item] == null) {
						delete requestData[item]
					}
				});
				let data = await this.$api.capitalReportApi({
					data: requestData
				})

				if (data.code == 200) {
					console.log(formData)
					this.list = this.list.concat(data.result.list)
					this.realAmt = data.result.realAmt
					this.total = data.result.total
					if (data.result.list <= 0 && this.list.length>0) {
						// uni.showToast({
						// 	title: "没有更多了",
						// 	icon: "none"
						// })
					}
				}
				// uni.hideLoading();
			},
			saveUser(data) {
				this.formData.sname = data.cname
				// this.formData.cid = data.cid
				// console.log(this.formData);
				this.$refs.child.close();
			},
			queryData() {
				this.list = []
				this.formData.pageNo = 1
				this.getList(this.formData)
			},
			open() {
				this.$refs.child.open();
			},
		},
		onReachBottom() {
			this.formData.pageNo++
			this.getList(this.formData)
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
	}

	.statistics {
		height: 100vh;
		background: #f1f1f1;

		.form {
			padding: 0 68rpx 32rpx 68rpx;
			background-color: #fff;

			.form_item {

				color: #bdbdbd;
				margin-bottom: 23rpx;
				padding-top: 32rpx;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						margin-left: 34rpx;
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					input {
						height: 94rpx;
						width: 376rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					button {
						color: #fff;
						width: 185rpx;
						height: 75rpx;
						line-height: 75rpx;
						background: #FE3430;
						border-radius: 38rpx;
					}
				}
			}

			.form_item1 {
				color: #bdbdbd;
				text-indent: 1em;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						margin-left: 34rpx;
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					input {
						height: 94rpx;
						width: 100%;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					button {
						width: 73rpx;
						height: 38rpx;
						background: #fe3430;
						border-radius: 49rpx;
						color: #fff;
					}
				}
			}

			.btn {
				background-image: url('/static/images/Registration/button.png');
				background-size: 280rpx 97rpx;
				color: #fff;
				margin-top: 30rpx;
				width: 280rpx;
				height: 97rpx;
				line-height: 75rpx;
				text-align: center;
				margin-left: 50%;
				transform: translateX(-50%);


			}

			.Actual {
				margin-top: 20rpx;

				text {
					color: #FE3430;
				}
			}

		}

		.article {
			padding: 32rpx 17rpx;

			.article_table {
				background: #FFFFFF;
				min-height: 274rpx;
				border-radius: 20rpx;
				padding: 12rpx;
				box-sizing: border-box;
				color: #272727;

				.title {
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-bottom: 1px solid #F1F1F1;

					.operate {
						padding: 0 108rpx;
					}
				}

				.table_body {
					display: flex;
					justify-content: space-around;
					text-align: center;
					margin-top: 20rpx;
					height: 80rpx;
					line-height: 60rpx;

					.num {
						color: #FE3430;
					}

					.btn1 {
						display: flex;
						justify-content: space-around;
						align-items: center;

						view {
							background: #FE3430;
							width: 124rpx;
							height: 48rpx;
							line-height: 30rpx;
							border-radius: 24rpx;
							padding: 13rpx 0;
							font-size: 24rpx;
							color: #fff;
							text-align: center;
						}
					}
				}
			}

			table {
				border-radius: 20rpx;
				background-color: #fff;
				width: 100%;

				th {
					padding: 32rpx 0;
					border-bottom: 2rpx solid #f1f1f1;
				}

				td {
					padding: 32rpx 0;
					text-align: center;
				}

				.btns {
					view {
						margin: 10rpx;
					}
				}
			}
		}
	}
</style>
